<template>
    <div class="main">
     <p class="main_text">公司账户记录</p>
        <!-- ############################################## 数据表格 ############################################## -->
        <div class="cyr-flex">
          <div class="mb20">
                    <span class="demonstration">公司名称</span>
                    <el-input v-model.trim="searchValue.companyName" style="width: 200px" />
                    <el-button class="solid" style="margin-left: 10px;" @click="search">查询</el-button>
                    <el-button class="hollow" @click="reset">重置</el-button>
                    <el-button type="primary" style="float: right;" @click="handleExportExcel">导出明细</el-button>
            </div>
          <div class="cyr-flex-box">
            <el-table :data="tableData"  :show-overflow-tooltip="true" v-adaptive border>
                <el-table-column label="编号" type="index" width="80"></el-table-column>
                <el-table-column label="公司名称" prop="companyName"></el-table-column>
                <el-table-column label="账户金额" prop="balance"></el-table-column>
                <el-table-column label="锁定金额" prop="lockAmount"></el-table-column>
            </el-table>
            <smartPager v-model:current-page="currentPage" v-model:page-size="pageSize" :total="total"
                @change="handleCurrentChange" />
          </div>
        </div>
    </div>
</template>
<script setup lang="ts">
import { ref } from "vue";
import {
    RequestGetCompaniesBalance
} from "@/api/path/index.js";
import { formatJson, formatTimeHan } from '@/utils/index';
import { exportJson2Excel } from '@/utils/excel'
const currentPage = ref(1)
const pageSize = ref(10)
const searchValue = ref({
    page: currentPage.value,
    rows: 10,
    companyName: ''
});
const handleExportExcel = () => {
    const tHeader = ['编号', '公司名称', '账户金额', '锁定金额']
    const filterVal = ['id', 'companyName', 'balance', 'lockAmount']
    const list = tableData.value.map((item, index) => {
        return {
            ...item,
            id: index
        }
    })
    const data = formatJson(filterVal, list)
    exportJson2Excel(tHeader, data, `${formatTimeHan(new Date())}公司账户记录`, undefined, undefined,)
}




const search = () => {
    initData(searchValue.value)
}
const reset = () => {
    searchValue.value.companyName = '';
    currentPage.value = 1;
    searchValue.value.page = 1
    initData(searchValue.value);
}
const tableData = ref<any[]>([])
const total = ref(0)
function initData(search) {
    searchValue.value.page = currentPage.value
    searchValue.value.rows = pageSize.value
    RequestGetCompaniesBalance(search).then(res => {
        tableData.value = res.resultObj.list
        total.value = res.resultObj.count

    })
}
const handleCurrentChange = (val) => {
    searchValue.value.page = val
    initData(searchValue.value)
}
initData(searchValue.value)
</script>
<style lang="scss" scoped>
@import "@/assets/css/plateform/Article/Content.css";
@import "@/assets/css/plateform/Shop/GoodsManage.css";

.main {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  .demonstration {
    margin-right: 10px;
  }

}
</style>